<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<style>-->
    <!--/*解决闪烁问题*/-->
    <!--[v-clock]{-->
        <!--display: none;-->
    <!--}-->
<!--</style>-->

<!--</div>-->
<div id="app1">
    <h1>{{info.name}}</h1>
    <h1>{{info.sex}}</h1>
    <h1>{{info.school}}</h1>
    <h1 v-for="l in info.link">{{l.name}}</h1>

    <a v-for="l in info.link" v-bind:href="l.url">{{l.url}}<br></a>
</div>


<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    var ifa=  new Vue({
        // 元素ss
        el:"#app1",
        data(){
            return{
                //请求的返回参数，必须和json字符串一样
                info:{
                    "name":"",
                    "sex":"",
                    "school":"",
                    "link":[{
                        "name":"",
                        "url":""
                    }


                    ]
                }
            }
        },
        mounted(){//钩子函数 链式编程 ES6新特性
            axios.get("../data.json").then(response=>(this.info=response.data));
        }
    });
</script>
</body>
</html>
